<template>
  <!-- 发布需求 -->
  <div class="wrapper">
    <div class="publish">
      <a-card title="我要发布" style="width: 100%" >
        <a-form :model="formState" name="basic"  :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
          @finish="onFinish" @finishFailed="onFinishFailed" style="width: 60%;">
          <a-form-item label="材料名称" name="matrialName" :rules="[{ required: true, message: '请输入材料名称!' }]">
            <a-input v-model:value="formState.materialrname" />
          </a-form-item>

          <a-form-item label="数量" name="quantity" :rules="[{ required: true, message: '请输入材料数量!' }]">
            <a-input v-model:value="formState.quantity" />
          </a-form-item>

          <a-form-item label="价格用途" :rules="[{ required: true, message: '请输入价格用途!' }]">
            <a-checkbox-group v-model:value="formState.use">
              <a-checkbox value="1" name="type">采购</a-checkbox>
              <a-checkbox value="2" name="type">预算</a-checkbox>
              <a-checkbox value="3" name="type">结算</a-checkbox>
              <a-checkbox value="4" name="type">招投标</a-checkbox>
            </a-checkbox-group>
          </a-form-item>

          <a-form-item label="供货周期" name="span" :rules="[{ required: true, message: '请输入供货周期!' }]">
            <a-input v-model:value="formState.span" />
          </a-form-item>

          <a-form-item label="付款方式" name="payment" :rules="[{ required: true, message: '请输入付款方式!' }]">
            <a-input v-model:value="formState.payment" />
          </a-form-item>

          <a-form-item label="项目所在地" name="projectPosition">
            <a-input v-model:value="formState.projectPosition" />
          </a-form-item>

          <a-form-item label="项目名称（选填）" name="projectName">
            <a-input v-model:value="formState.projectName" />
          </a-form-item>

          <a-form-item label="询价单位（选填）" name="from">
            <a-input v-model:value="formState.from" />
          </a-form-item>

          <a-form-item label="询价联系人" name="contact" :rules="[{ required: true, message: '请输入联系人!' }]">
            <a-input v-model:value="formState.contact" />
          </a-form-item>

          <a-form-item label="付款方式" name="payment" :rules="[{ required: true, message: '请输入付款方式!' }]">
            <a-input v-model:value="formState.payment" />
          </a-form-item>

          <a-form-item label="报价是否加盖公章" :rules="[{ required: true, message: '请选择!' }]">
            <a-radio-group v-model:value="formState.stampOrNot">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="报价是否公开" :rules="[{ required: true, message: '请选择!' }]">
            <a-radio-group v-model:value="formState.publicOrNot">
              <a-radio value="1">是</a-radio>
              <a-radio value="2">否</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="报价截止日期">
            <a-date-picker v-model:value="formState.deadline" />
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit">Submit</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
    <div class="quote">
      <a-card title="竭诚报价" style="width: 100%">
        <a-form :model="formState1" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
          @finish="onFinish" @finishFailed="onFinishFailed" style="width: 60%;">
          <a-form-item label="厂商名称" name="manufacturer" :rules="[{ required: true, message: '请输入厂商名称!' }]">
            <a-input v-model:value="formState1.manufacturer" />
          </a-form-item>

          <a-form-item label="联系人" name="contact" :rules="[{ required: true, message: '请输入联系人!' }]">
            <a-input v-model:value="formState1.contact" />
          </a-form-item>

          <a-form-item label="价格类型" :rules="[{ required: true, message: '请输入价格类型!' }]">
            <a-radio-group v-model:value="formState1.priceType">
              <a-radio value="1">除税价</a-radio>
              <a-radio value="2">含税价</a-radio>
              <a-radio value="3">货到工地价</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item label="税率" name="span">
            <a-input v-model:value="formState1.taxRate" />
          </a-form-item>

          <a-form-item label="总价" name="total" :rules="[{ required: true, message: '请输入总价!' }]">
            <a-input v-model:value="formState1.total" />
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit">Submit</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
const formState = reactive({

})

const formState1 = reactive({

})

const onFinish = values => {
  console.log('Success:', values);
}
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
}


</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.publish {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quote {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}
</style>